<template>
    <div class="container_tree">

        <div class="body_wrap_tree">

            <el-card class="left_wrap_tree" shadow="hover" ref="content_card">
                <div class="header_wrap">
                    <div class="left">
                        <i class="el-icon-edit-outline"></i> 菜单
                    </div>
                    <div class="right">
                        <el-button @click="handleAddRoot" size="small" class="btn_ext" plain type="primary" icon="el-icon-plus"/>
                        <el-button @click="handleExpand" size="small" class="btn_ext" plain type="primary" icon="el-icon-s-operation"/>
                    </div>
                </div>

                <div class="tree_wrap">
                    <el-input v-model="filterText" clearable placeholder="请输入名称搜索" size="small" suffix-icon="el-icon-search"></el-input>
                    <el-tree
                    v-loading="loading"
                        :show-checkbox="false"
                        node-key="id"
                        ref="tree"
                        :data="tree"
                        :props="defaultProps"
                        :default-expand-all="false"
                        :expand-on-click-node="false"
                        :default-expanded-keys="exapndKeys"
                        :filter-node-method="filterNode"
                        @node-click="handleNodeClick">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span>
                                <el-button :disabled="node.level > 2" type="text" size="mini" @click.stop="append(data)">添加</el-button>
                                <el-button type="text" size="mini" @click.stop="edit(data)">编辑</el-button>
                                <el-button type="text" size="mini" @click.stop="remove(node, data)">删除</el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>

            </el-card>

            <el-card class="right_wrap_tree" shadow="hover" ref="content_card">
                <el-alert
                    v-if="!checkedNode"
                    class="tips"
                    title="从菜单列表选择一项后，进行查看"
                    type="warning"
                    effect="dark"
                    show-icon>
                </el-alert>

                <SysPermission ref="sysp" v-show="checkedNode"/>
            </el-card>


        </div>

        <!-- 弹窗, 新增 / 修改 -->
        <AddOrUpdate ref="addOrUpdate" @refreshDataList="getListWithTree"></AddOrUpdate>

    </div>
</template>

<script>
    import AddOrUpdate from './add-or-update-dialog'
    import SysPermission from '@/views/system/syspermission'
    export default {
        components: {
            AddOrUpdate,
            SysPermission
        },

        data() {
            return {
                extText: '展开',
                loading: false,
                tree: [],
                filterText: "",

                defaultProps: {
                    label: 'name',
                    children: 'children'
                },
                form: {
                    pid: null,
                    name: null,
                    calJdl: 0,
                    sort: null,
                    ctime: null,
                    utime: null
                },
                rules: {
                    name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
                },
                expand: false,
                checkedNode: null,
                exapndKeys: [],
                arrayKes: [],

                submitLoading: false
            }
        },

        created() {
        },


        mounted() {
            this.$nextTick(() => {
                this.getListWithTree()
            })
        },

        //监控data中的数据变化
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },

        methods: {

            /**
             * 添加顶级菜单
             */
            handleAddRoot() {
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.addRoot()
                })
            },

            /**
             * 添加子节点
             */
            append(data) {
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.append(data)
                })
            },

            /**
             * 编辑节点
             */
            edit(data) {
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.edit(data)
                })
            },

            /**
             * 删除节点
             */
            remove(node, data) {
                this.handleDelete(data)
            },

            /**
             * 删除
             */
            async handleDelete(checkNode) {
                let ids = []
                this.getKeys(ids, [checkNode])

                if (ids.length <= 0) {
                    this.$notify({title: '提示', message: '请选择需要删除的记录！', type: 'info'});
                } else {
                    const confirm = await this.$confirm('确定要删除？', '提示', {type: 'warning'}).catch(() => {
                    })
                    if (confirm) {
                        const res = await this.$http({
                            url: '/system/menu/delete',
                            method: 'POST',
                            data: ids
                        })
                        if (this.ResultMessage(res)) {
                            this.checkedNode = null
                            this.getListWithTree()
                        }
                    }
                }
            },

            /**
             * 详细信息
             */
            async getInfo(id) {
                if (id) {
                    const res = await this.$http({
                        url: '/system/menu/info/' + id,
                        method: 'GET'
                    })
                    this.form = Object.assign({}, res.data)
                }
            },

            /**
             * 获取数据
             */
            async getListWithTree() {
                this.loading = true
                const res = await this.$http({
                    url: '/system/menu/listWithTree',
                    method: 'GET'
                })
                if (this.ResultMessage(res, false)) {
                    if(res.data) {
                        this.tree = res.data
                        let keys = []
                        this.getKeys(keys, this.tree)
                        this.keys = keys
                    } else {
                        this.tree = []
                    }
                }
                this.loading = false
            },

            /**
             * 获取所有节点id
             */
            getKeys(keys, tree) {
                tree.forEach(item => {
                    keys.push(item.id)
                    if(item.children && item.children.length > 0) {
                        this.getKeys(keys, item.children)
                    }
                })
            },

            /**
             * 收起或展开
             */
            handleExpand() {
                if(!this.expand) {
                    this.expand = true
                    this.exapndKeys = this.keys
                } else {
                    this.expand = false
                    this.exapndKeys = []
                     for(let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++){
                        this.$refs.tree.store._getAllNodes()[i].expanded = false;
                    }
                }
            },

            /**
             * 树节点过滤
             */
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            /**
             * 获取节点详情
             */
            handleNodeClick(data, node, e) {
                this.checkedNode = data
                this.form = Object.assign({}, data)

                this.$refs.sysp.menus(data.id)
            },


            /**
             * 搜索
             */
             handleSearch() {
                this.getListWithTree()
            },

            /**
             * 重新加载数据表格
             */
             handleReload() {
                this.getListWithTree()
            },

            /**
             * 重置搜索表单
             */
             handleReset() {
                this.$refs.searchForm1.resetFields()
                this.$refs.searchForm2.resetFields()
            }

        }

    }
</script>
<style lang="scss">
.container_tree{
    .body_wrap_tree{
        display: flex;

        .left_wrap_tree{
            .el-card__body {
                padding: 0px;
            }
        }
        .right_wrap_tree{
            .el-card__body {
                padding: 0px;
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.container_tree{
    .body_wrap_tree{
        display: flex;
        padding: 10px;
        .left_wrap_tree{
            display: flex;
            flex-direction: column;
            width: 400px;
            .header_wrap{
                display: flex;
                width: 100%;
                height: 35px;
                padding: 10px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;
                font-size: 16px;
                justify-content: space-between;
                .left{

                }
                .right{
                    margin-right: 20px;
                }
                .el-icon-edit-outline{
                    font-size: 18px;
                    margin-right: 5px;
                }
                .btn_ext{
                    margin-left: 10px;
                }
            }
            .tree_wrap{
                padding: 10px;
                .el-input{
                    margin-bottom: 10px;
                }
            }
        }
        .right_wrap_tree{
            flex: 1;
            margin-left: 10px;

            .header_wrap{
                display: flex;
                width: 100%;
                height: 35px;
                padding: 10px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;
                font-size: 16px;
                .el-icon-edit-outline{
                    font-size: 18px;
                    margin-right: 5px;
                }
                .btn_ext{
                    margin-left: 10px;
                }
            }

            .wrap{
                padding: 10px;
                .tips{

                }

                .form_wrap{
                    padding: 10px 0;
                    .bts{
                        margin-left: 120px;
                    }
                }
            }

        }
    }
}
</style>
